<template>
    <div class="yearEnd">
        <div class="max-w header-card">
            <div class="header-card-show">
                <div class="header-card-show-header">
                    <p class="spec">年终奖发放年份:</p>
                    <div class="year">
                        <el-date-picker style="width:auto" v-model="data.monthData" type="year" placeholder="请选择年/月"
                            @change="change(data.monthData)" />
                        <!-- {{ data.monthData }} -->
                    </div>
                </div>
                <div class="header-card-show-list">
                    <p class="listSpec">年终奖实际发放金额</p>
                    <div class="listNumber">
                        <img class="imgs" src="../../assets/money.png" />
                        <p class="numbers">{{ data.takehomepay.toString().replace(/\B(?=(\d{3})+(?!\d))/g,
                            ",") == 0 ? '--' : data.takehomepay.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }}&nbsp;元
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="max-w container">
            <h6 class="container-header">{{ data.monthData }}&nbsp;年终奖构成明细</h6>
            <div class="container-list">
                <div class="container-list-card">
                    <p class="title">姓&nbsp;&nbsp;&nbsp;名：</p>
                    <p class="cardValue">{{ data.personname || '暂无' }}</p>
                </div>
                <div class="container-list-card">
                    <p class="title">部&nbsp;&nbsp;&nbsp;门：</p>
                    <p class="cardValue">{{ data.deptname || '暂无' }}</p>
                </div>
                <div class="container-list-card">
                    <p class="title">年终奖：</p>
                    <p class="cardValue">{{ data.annualbonus.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }} 元</p>
                </div>
                <div class="container-list-card">
                    <p class="title">年假补贴：</p>
                    <p class="cardValue">{{ data.annualleave }} 元</p>
                </div>
                <div class="particulars_list">
                    <div class=" footing">
                        <p class="send">年终奖应发合计 ：{{ data.salary || '--' }} 元</p>
                    </div>
                </div>
                <div class="container-list-card">
                    <p class="title">个 税：</p>
                    <p class="cardValue">{{ data.individualincometax.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }} 元
                    </p>
                </div>
                <div class="container-list-card">
                    <p class="title">社 保：</p>
                    <p class="cardValue">{{ data.socialsecurity }} 元</p>
                </div>
                <div class="container-list-card">
                    <p class="title">公积金：</p>
                    <p class="cardValue">{{ data.accumulationfund }} 元 </p>
                </div>
                <div class="container-list-card">
                    <p class="title">工会费：</p>
                    <p class="cardValue">{{ data.tradeunion }} 元</p>
                </div>
                <div class="container-list-card">
                    <p class="title">水电费：</p>
                    <p class="cardValue">{{ data.waterandelectricity }} 元 </p>
                </div>
                <div class="container-list-card">
                    <p class="title">物业费：</p>
                    <p class="cardValue">{{ data.propertymanagementfee }} 元</p>
                </div>
                <div class="particulars_list">
                    <div class=" footing">
                        <p class="send">年终奖扣款合计 ：{{ data.withhold.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") == 0 ?
                            '--' : data.withhold.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }} 元</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="max-w bottomButtn">
            <button :class="data.ckecked ? 'bottomButtn_query2' : 'bottomButtn_query'" :disabled="data.ckecked"
                @click="confirm">{{ data.ckecked ? '已 确 认' : '确 认' }}</button>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import { getYearBonusInfo, checkYearBonus } from '@/api/salaryApi'
import { ElMessage } from 'element-plus'

const data = reactive({
    monthData: Number(new Date().getFullYear()) - 1 + '',
    key: '', // 用户信息
    annualbonus: 0, // 合计
    individualincometax: 0,//税额
    takehomepay: 0, //实发
    personname: '', //姓名
    deptname: '', // 部门
    id: '',
    ckecked: false, // 是否确认
    salary: 0, //应发合计
    annualleave: 0, // 年假补贴
    socialsecurity: 0, // 公积金
    accumulationfund: 0, // 公积金
    tradeunion: 0, //水电费
    waterandelectricity: 0,//水电费
    propertymanagementfee: 0, //物业费
    withhold: 0, //扣款合计
})

onMounted(() => {
    queryString('key')
    yearBonusInfo()
})

// 获取网址的key
const queryString = (val) => {
    var uri = window.location.href;
    var re = new RegExp("[?&]" + val + "=([^&?]*)", "ig");
    data.key = decodeURIComponent(((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 2)) : null))
}

// 数据获取
const yearBonusInfo = () => {
    getYearBonusInfo({
        key: data.key,
        salaryyear: data.monthData,
    }).then(res => {
        console.log(res.length > 0)
        if (res.length > 0) {
            data.personname = res[0].personname
            data.deptname = res[0].deptname
            data.annualbonus = res[0].annualbonus //合计
            data.individualincometax = Number(res[0].individualincometax).toFixed(2)  // 个税
            data.takehomepay = res[0].takehomepay // 实发年终奖
            data.annualleave = res[0].annualleave // 年假补贴
            data.socialsecurity = res[0].socialsecurity // 公积金
            data.accumulationfund = res[0].accumulationfund // 公积金
            data.tradeunion = res[0].tradeunion //水电费
            data.waterandelectricity = res[0].waterandelectricity //水电费
            data.propertymanagementfee = res[0].propertymanagementfee //物业费
            data.salary = Number(res[0].annualbonus) + Number(res[0].annualleave) // 年终奖应发合计
            data.withhold = (Number(res[0].individualincometax) + Number(res[0].socialsecurity) + Number(res[0].accumulationfund) + Number(res[0].tradeunion) + Number(res[0].waterandelectricity) + Number(res[0].propertymanagementfee)).toFixed(2)// 年终奖扣款合计
            data.id = res[0].id
            if (res[0].isconfirmed == 'Y') {
                data.ckecked = true
            } else {
                data.ckecked = false
            }
        } else {
            ElMessage(res.message)
            data.personname = ''
            data.deptname = ''
            data.annualbonus = 0
            data.individualincometax = 0
            data.takehomepay = 0
            data.annualleave = 0
            data.socialsecurity = 0
            data.accumulationfund = 0
            data.tradeunion = 0
            data.waterandelectricity = 0
            data.propertymanagementfee = 0
            data.salary = 0
            data.withhold = 0
            data.id = ''
            data.ckecked = false
        }

    })
}

// 确定
const confirm = () => {
    checkYearBonus({
        id: data.id
    }).then(res => {
        console.log(res)
        ElMessage(res.message)
        if (res.statusCode == 200) {
            data.ckecked = true
        }
    })
}

// 选择时间
const change = (x) => {
    console.log(x)
    if (x !== null) {
        data.monthData = x.getFullYear() + ''
    }
    yearBonusInfo()
}
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
